<template>
    <section class="contianer">
        <el-row  type="flex" justify="space-between">

            <!-- 顶部过滤列表 -->
            <div class="flights-content">
                <!-- 过滤条件 -->
                <FlightsFilters
                :data="cacheFlightsData"
                @setDataList="setDataList"/>
                
                <!-- 航班头部布局 -->
                
                <FlightsListHead/>
                
                
                
                <!-- 航班信息 -->
                
                <FlightsItem
                v-for="(item,index) in dataList"
                :key="index"
                :data="item"/>
                
                <!-- 分页信息 -->
                <el-row type="flex" justify="center" style="margin-top:10px;">
                        <!-- size-change：切换条数时候触发 -->
                        <!-- current-change：选择页数时候触发 -->
                        <!-- current-page: 当前页数 -->
                        <!-- page-size：当前条数 -->
                        <!-- total：总条数 -->
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageIndex"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                        </el-pagination>
                </el-row>
            </div>

            <!-- 侧边栏 -->
            <FlightsAside/>
        </el-row>
    </section>
</template>

<script>

import FlightsListHead from "@/components/air/flightsListHead"
import FlightsItem from "@/components/air/flightsItem"
import FlightsFilters from "@/components/air/flightsFilters"
import FlightsAside from "@/components/air/flightsAside"
export default {
    data(){
        return {
            // 用来接收返回的所有数据
            flightsData:{
                flights:[],
                // 由返回来的数据可知，info是一个对象
                info:{},
                options:{}
            },
            // 缓存一份总数据，这份数据一旦赋值之后不能被修改
            cacheFlightsData: {
                flights: [],
                info: {},
                options: {}
            },
            // 保存当前的分页需要渲染的数组
            // dataList:[],
            // 分页的变量
            pageIndex:1,//默认当前页为第一页
            pageSize:5,//默认当前页条数为5
            total:0

        }
    },
    computed:{
        // 因为同时要监听三个属性的变化,dataList,pageIndex,pageSize,所以直接放computed里面监听多个属性的变化
        dataList(){
            const arr = this.flightsData.flights.slice(
                (this.pageIndex - 1 ) * this.pageSize,
                this.pageIndex * this.pageSize
            );
            return arr;
        }
    },
    // 监听路由的变化，在组件被复用使用调用这个路由守卫
    async beforeRouteUpdate(to, from , next){
        // 获取航班列表的函数,返回promise
        await this.getList(to.query)
        // 必须要调用
        next();
    },
    components:{
        FlightsListHead,
        FlightsItem,
        FlightsFilters,
        FlightsAside
    },
    mounted(){
        // this.$axios({
        //     // 请求机票列表数据
        //     url:'/airs',
        //     params:this.$route.query
        // }).then(res=>{
        //     // 返回总数据
        //     const {data} = res;
        //     console.log(data);
        //     this.flightsData = data;

        //     // 赋值给拷贝的新数据, 这份数据一旦赋值之后不能被修改
        //     this.cacheFlightsData = {...data};

        //     // this.dataList = this.flightsData.flights.slice(0,5);
        //     this.total = this.flightsData.total;
        // })
        this.getList(this.$route.query);
    },
    methods: {
        // 获取航班列表的函数，query是5个参数
        getList(query){
            // 请求机票列表数据
            return this.$axios({
                url: "/airs",
                params: query
            }).then(res => {
                // 总数据，包含了 flights， info， options，flights用来渲染航班列表
                const {data} = res;
                this.flightsData = data;
                // 赋值给拷贝的新数据, 这份数据一旦赋值之后不能被修改
                this.cacheFlightsData = {...data};
                // 数据的总条数
                this.total = this.flightsData.total;
            })
        }, 
        // 分页切换条数时候触发
        handleSizeChange(val){
            this.pageSize = val;
        },
        // 切换页数时候触发
        handleCurrentChange(val){
            // 修改当前的页面
            this.pageIndex = val;
            // 得到当前分页要渲染的数组
            // this.dataList = this.flightsData.flights.slice(
            //     (val-1)*this.pageSize,
            //     val*this.pageSize
            // )
        },
        // 传递给子组件修改dataList事件
        setDataList(arr){
            // 这里其实是有问题的，后面的值都会只剩下修改后的
            this.flightsData.flights = arr;
            // 修改总条数
            this.total = arr.length;
            // 把页面设置为1
            this.pageIndex = 1;
        }
    },
}
</script>

<style scoped lang="less">
    .contianer{
        width:1000px;
        margin:20px auto;
    }

    .flights-content{
        width:745px;
        font-size:14px;
    }

    .aside{
        width:240px;
    } 
</style>